<template>
  <div class="Left">
    <li
    @click="changeUser('', '')" 
      class="item bdb flex jc-sb aic"
    >
      <span class="username fcc">全部仓库</span> 
    </li>
    <li
    @click="changeUser(item.userId, index)"
      v-for="(item,index) in userList"
      :key="index"
      :class="{active: index === activeIndex}"
      class="item bdb flex jc-sb aic"
    >
      <span class="username fcc">{{ item.username }}</span>
      <span class="userId">{{ item.userId }}</span>
    </li>
  </div>
  <UserRepoList :userId="userId"/>
</template>


<script>
import { getUsers } from "../api/repo";
import UserRepoList from "./userRepoList.vue";
export default {
  components: {
    UserRepoList,
  },
  data() {
    return {
      activeIndex: '',
      userId: '',
      userList: [],
    };
  },

  created() {
    this.userList = getUsers();
  },

  methods: {
    changeUser(userId,index){
      this.activeIndex = index;
      this.userId = userId;
    }
  }
};
</script>


<style scoped>
.active {
  color: palevioletred;
}
.Left {
  position: fixed;
  height: 100%;
  background: #fff;
  width: 40%;
  top: 55px;
  left: 0;
  padding-left: 5px;
  padding-right: 10px;
}

.Right {
  position: fixed;
  height: 100%;
  background: #fff;
  width: 58%;
  top: 55px;
  right: 0;
  padding-left: 5px;
  padding-right: 10px;
}

.username {
  height: 30px;
  width: 100px;
}
.userId {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>